<template>
  <div class="line-chart">
    <div class="title-wrapper">
      <div class="title">外卖骑手概况</div>
      <div class="sub-title">Rider Growth rate</div>
    </div>
    <div id="average-age-chart2" />
  </div>
</template>

<script>
import Echarts from "echarts";
import { watch, onUnmounted } from "vue";

const colors = ["rgb(209,248,139)", "rgb(115,201,245)", "rgb(124,136,146)"];

export default {
  name: "lineChart",
  props: {
    data: Object
  },
  setup(props) {
    let chart;
    let task;
    let currentChart = 0;

    onUnmounted(() => task && clearInterval(task));
    const update = () => {
      function createOption() {
        const { axisX, orderData, rateData } = props.data;
        const axisData = axisX;
        let legendData = [];
        let data1 = [];
        let data2 = [];
        if (currentChart === 0) {
          legendData = [orderData.legend1, orderData.legend2];
          data1 = orderData.data1;
          data2 = orderData.data2;
        } else {
          legendData = [rateData.legend1, rateData.legend2];
          data1 = rateData.data1;
          data2 = rateData.data2;
        }
        return {
          color: colors,
          tooltip: {
            trigger: "none",
            axisPointer: {
              type: "cross"
            }
          },
          legend: {
            top: 20,
            right: 40,
            icon: "rect",
            textStyle: {
              fontSize: 16,
              color: colors[2]
            },
            data: legendData
          },
          grid: {
            top: 60,
            bottom: 30,
            left: 80,
            right: 40
          },
          xAxis: [
            {
              type: "category",
              axisTick: { show: false },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: colors[2]
                }
              },
              axisLabel: {
                fontSize: 16
              },
              data: axisData
            },
            {
              type: "category",
              axisTick: { show: false },
              axisLine: { show: false }
            }
          ],
          yAxis: [
            {
              type: "value",
              axisTick: { show: false },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: colors[2]
                }
              },
              axisLabel: {
                fontSize: 16
              },
              splitLine: {
                lineStyle: {
                  type: "dotted"
                }
              }
            }
          ],
          series: [
            {
              name: legendData[0],
              type: "line",
              xAxisIndex: 1,
              smooth: true,
              lineStyle: {
                width: 2
              },
              symbol: "none",
              // data: [5, 100, 70, 120, 80, 15, 200, 300, 195, 150, 80, 103]
              data: data1
            },
            {
              name: legendData[1],
              type: "line",
              smooth: true,
              lineStyle: {
                width: 2
              },
              symbol: "none",
              // data: [10, 50, 80, 4, 90, 50, 105, 160, 111, 54, 108, 50]
              data: data2
            }
          ]
        };
      }

      if (!chart) {
        chart = Echarts.init(document.getElementById("average-age-chart2"));
      }
      chart.setOption(createOption());
      if (currentChart === 0) {
        currentChart = 1;
      } else {
        currentChart = 0;
      }
    };
    const stop = watch(
      () => props.data,
      () => {
        update();
        task = setInterval(() => {
          update();
        }, 5000);
        stop();
      }
    );
  }
};
</script>

<style lang="less" scoped>
.line-chart {
  width: 100%;
  height: 100%;
  background: rgb(43, 44, 46);

  .title-wrapper {
    padding: 20px 40px 0;
    box-sizing: border-box;

    .title {
      font-size: 32px;
    }

    .sub-title {
      font-size: 16px;
      margin-top: 10px;
    }
  }

  #average-age-chart2 {
    width: 100%;
    height: 250px;
  }
}
</style>
